<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>室内使用信息审批</title>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery-1.11.1.js"></script>
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/form.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#roomUseProperty").select2();
		initSelectData();
		initTypeSelectData();
		initIndoorMsg();
		toolTip();
		
		<c:if test="${ requestScope.notPassExamine}">
			//修改字段标记记录变量
			<c:set var="marks" value="原数据"/>
		</c:if>
	});

	function initIndoorMsg() {
		var data = ${requestScope.door};
		if (data != null) {
			$("#infoorManageAddForm").find("[name='roomTypeId']").val(data.roomType).trigger("change");
			$("#infoorManageAddForm").find("[name='roomStatus']").val(data.roomStatus).trigger("change");
			$("#infoorManageAddForm").find("[name='roomUseProperty']").val(data.roomUseProperty).trigger("change");
			$("#infoorManageAddForm").find("input[name='peopleCount']").val(data.peopleCount);
			$("#infoorManageAddForm").find("input[name='resident']").val(data.resident);
			$("#infoorManageAddForm").find("input[name='riskArticle']").val(data.riskArticle);
			$("#infoorManageAddForm").find("input[name='notriskArticle']").val(data.notriskArticle);
			$("#infoorManageAddForm").find("input[name='diningRoom']").val(data.diningRoom);
			$("#infoorManageAddForm").find("input[name='meeting']").val(data.meeting);
			$("#infoorManageAddForm").find("input[name='work']").val(data.work);
			$("#infoorManageAddForm").find("#other").val(data.other);
			$("#infoorManageAddForm").find("input[name='tradeFair']").val(data.tradeFair);
			var workUses = data.workUse;
			if (data.roomType == "房间" && data.roomUseProperty == "办公") {
				if (workUses != null && workUses != "") {
					var useArr = workUses.split(",");
					for (var i = 0; i < useArr.length - 1; i++) {
						var html = "<tr class=\"wUse\"><td width=\"73\"><span>用途</span></td><td width=\"320\"><input type=\"type\"id=\"\"name=\"workUse\"value=\"" + useArr[i] + "\"/> "
							+ "<a href=\"javascript:void(0)\"onclick=\"delTr(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
						$("#infoorManageAddForm table")
							.append(html);
					}
				}
			}
			//隐藏按钮
			$("#infoorManageAddForm .icon-fullscreen").hide();
			$("#infoorManageAddForm").find(".addbtn,select,input[type='file']").attr("disabled", true);
			$("#infoorManageAddForm").find("input,textarea").attr("readonly", true);
			$("#infoorManageAddForm [name='remark']").attr("readonly", false);
	
		}

	}
	var spFlag;
	//optIndoor操作字段，0：拒绝；1：同意
	function creditSubmit(val) {
		spFlag = val;
		$("#infoorManageAddForm").submit();
	}

	function initSelectData() {
		var html = "";
		var arr = [ "客厅", "居住", "仓储", "办公", "商展", "其他" ];
		for (var i = 0; i < arr.length; i++) {
			html = "<option value=\"" + arr[i] + "\">" + arr[i] + "</option>";
			$("#roomUseProperty").append(html);
		}
	}

	function change2(obj) {
		var val = $(obj).val();
		var roomUseProperty = $("#roomUseProperty").val();
		if (val == "房间" && roomUseProperty == "办公") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").show();
			$("#panel_5").hide();
			$("#panel_6").hide();
			$(".wUse").show();
			$("#panel_4 .addbtn").show();
		} else if (val != "房间" && roomUseProperty == "办公") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").show();
			$("#panel_4").show();
			$("#panel_5").show();
			$("#panel_6").hide();
			$(".wUse").hide();
			$("#panel_4 .addbtn").hide();
		}
	}
	function change(obj) {
		var val = $(obj).val();
		var roomTypeId = $("#roomTypeId").val();
		if (val == "居住") {
			$("#panel_1").show();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").show();
			$("#panel_6").hide();
		} else if (val == "仓储") {
			$("#panel_1").hide();
			$("#panel_2").show();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").show();
			$("#panel_6").hide();
		} else if (val == "办公") {
			if (roomTypeId == "房间") { //---------------------------------------
				$("#panel_1").hide();
				$("#panel_2").hide();
				$("#panel_3").hide();
				$("#panel_4").show();
				$("#panel_5").hide();
				$("#panel_6").hide();
				$(".wUse").show();
				$("#panel_4 .addbtn").show();

			} else {
				$("#panel_1").hide();
				$("#panel_2").hide();
				$("#panel_3").show();
				$("#panel_4").show();
				$("#panel_5").show();
				$("#panel_6").hide();
				$(".wUse").hide();
				$("#panel_4 .addbtn").hide();
			}
		} else if (val == "客厅") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").show();
			$("#panel_5").hide();
			$("#panel_6").hide();
			$(".wUse").hide();
			$("#panel_4 .addbtn").hide();
		} else if (val == "商展") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").hide();
			$("#panel_6").show();
		} else {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").show();
			$("#panel_6").hide();
		}
	}
</script>
<style type="text/css">
.td_l {
	width: 80px;
}

tr {
	height: 40px;
	margin: 10px;
}
</style>
</head>
<body>
	<form class="cmxform" id="infoorManageAddForm" method="post" action="roomInfo/addIndoorPending">
		<div style="padding: 10px 0px">
			<div class="panel panel-default">
				<div name="type" style="padding: 10px;">
					房屋类型：<select class="js-example-basic-single" name="roomTypeId"
						id="roomTypeId" style="width: 135px;">
						<!-- onchange="change2(this)" -->
					</select>
					<c:if test="${not empty requestScope.map.roomType }"><span class="toolTip mark-msg"data-tip="${requestScope.map.roomType }">
						<c:out value="${marks}"/></span>
					</c:if>
					<c:if test="${requestScope.map.roomType=='' }"><span class="toolTip mark-msg"data-tip="空">
						<c:out value="${marks}"/></span>
					</c:if>
					 &nbsp; 房屋状态：<select class="js-example-basic-single"
						name="roomStatus" id="roomStatus" style="width: 135px;"
						onchange="showTableMsg(this)">
						<option value="0">空置</option>
						<option value="1">在用</option>
					</select>
					<c:if test="${not empty requestScope.map.roomStatus }">
						<c:choose>
							<c:when test="${requestScope.map.roomStatus == 1}">
								<span class="toolTip mark-msg"data-tip="在用">
								<c:out value="${marks}"/></span>
							</c:when>
							<c:otherwise>
								<span class="toolTip mark-msg"data-tip="空置">
								<c:out value="${marks}"/></span>
							</c:otherwise>
						</c:choose>
						
					</c:if>
					<c:if test="${requestScope.map.roomStatus=='' }"><span class="toolTip mark-msg"data-tip="空">
						<c:out value="${marks}"/></span>
					</c:if>
				</div>
				<div class="panel-body" name="roomUse">
					<table width="100%">
						<tr>
							<td>使用性质</td>
							<td colspan="3"><select class="js-example-basic-single"
								name="roomUseProperty" id="roomUseProperty"
								style="width: 135px;">
									<!--  onchange="change(this)" -->
							</select>
							<c:if test="${not empty requestScope.map.roomUseProperty }"><span class="toolTip mark-msg"data-tip="${requestScope.map.roomUseProperty }">
								<c:out value="${marks}"/></span>
							</c:if>
							<c:if test="${requestScope.map.roomUseProperty=='' }"><span class="toolTip mark-msg"data-tip="空">
								<c:out value="${marks}"/></span>
							</c:if>
							<input hidden="hidden" id="entityId_indoorId" name="id" value="${id }"></td>

						</tr>
						<tr id="panel_1" hidden="hidden">
							<td width="73">居住人数</td>
							<td width="360">
								<input id="peopleCount" name="peopleCount" value="0" />
								<c:if test="${not empty requestScope.map.peopleCount }"><span class="toolTip mark-msg"data-tip="${requestScope.map.peopleCount }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.peopleCount=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
							<td width="73">居住人</td>
							<td><input id="resident" name="resident" />
								<c:if test="${not empty requestScope.map.resident }"><span class="toolTip mark-msg"data-tip="${requestScope.map.resident }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.resident=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
						</tr>
						<tr id="panel_2" hidden="hidden">
							<td width="73">危险品</td>
							<td width="360"><input name="riskArticle" id="riskArticle" />
								<c:if test="${not empty requestScope.map.riskArticle }"><span class="toolTip mark-msg"data-tip="${requestScope.map.riskArticle }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.riskArticle=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
							<td width="73">非危险品</td>
							<td><input name="notriskArticle" id="notriskArticle" />
								<c:if test="${not empty requestScope.map.notriskArticle }"><span class="toolTip mark-msg"data-tip="${requestScope.map.notriskArticle }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.notriskArticle=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
						</tr>
						<tr id="panel_3" hidden="hidden">
							<td width="73">餐厅</td>
							<td colspan="3"><input name="diningRoom" id="diningRoom" />
								<c:if test="${not empty requestScope.map.diningRoom }"><span class="toolTip mark-msg"data-tip="${requestScope.map.diningRoom }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.diningRoom=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
							<td width="73">会议</td>
							<td><input name="meeting" id="meeting" />
								<c:if test="${not empty requestScope.map.meeting }"><span class="toolTip mark-msg"data-tip="${requestScope.map.meeting }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.meeting=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
						</tr>
						<tr id="panel_4" hidden="hidden">
							<td width="73">办公</td>
							<td width="360"><input name="work" id="work" /> <a
								class="btn btn-danger radius a_font addbtn"
								onclick="addTr(this)"> 添加</a></td>
						</tr>
						<tr id="panel_5">
							<td width="73">使用描述</td>
							<td colspan="3"><textarea style="width:71%;" rows="3"
									maxlength="200" name="other" id="other"
									onkeydown="checkMaxInput(this,200)"
									onkeyup="checkMaxInput(this,200)"
									onfocus="checkMaxInput(this,200)"
									onblur="checkMaxInput(this,200);resetMaxmsg()"></textarea> <!-- <input name="other" id="other" /> -->
									<c:if test="${not empty requestScope.map.other }"><span class="toolTip mark-msg"data-tip="${requestScope.map.other }">
										<c:out value="${marks}"/></span>
									</c:if>
									<c:if test="${requestScope.map.other=='' }"><span class="toolTip mark-msg"data-tip="空">
										<c:out value="${marks}"/></span>
									</c:if>
							</td>
						</tr>
						<tr id="panel_5" hidden="hidden">
							<td width="73">其他</td>
							<td colspan="3"><input name="other" id="other" />
								<c:if test="${not empty requestScope.map.other }"><span class="toolTip mark-msg"data-tip="${requestScope.map.other }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.other=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
						</tr>
						<tr id="panel_6" hidden="hidden">
							<td width="73">商展</td>
							<td width="360"><input name="tradeFair" id="tradeFair" />
								<c:if test="${not empty requestScope.map.tradeFair }"><span class="toolTip mark-msg"data-tip="${requestScope.map.tradeFair }">
									<c:out value="${marks}"/></span>
								</c:if>
								<c:if test="${requestScope.map.tradeFair=='' }"><span class="toolTip mark-msg"data-tip="空">
									<c:out value="${marks}"/></span>
								</c:if>
							</td>
						</tr>


					</table>
				</div>
				
			</div>
			<c:if test="${ requestScope.notPassExamine}">
				<!-- 修改时添加变更说明 -->
				<div style="margin:10px;"  id="remark">
					审批说明：<textarea rows="3" name="remark" style="width:70%"></textarea><span style="color:red;">*</span>
				</div>
				<div style="width:100%;text-align:center; padding-top:20px">
					<!-- 保存状态 -->
					<button class="btn btn-danger radius"
						onClick="creditSubmit(1);" type="button">同意</button>
					<button class="btn btn-default radius"
						onClick="creditSubmit(0);" type="button">拒绝</button>
				</div>
			</c:if>
		<input type="hidden" name="pendingId" id="pendingId" value="${pendingId }" />
		<input type="hidden" name="exDataId" id="exDataId" value="${exDataId }" />
		</div>
	</form>
	<script type="text/javascript">
		$(function() {
			mySubmit("infoorManageAddForm", initPark, successPark);
			
			/* var s = $("#roomTypeId").select2();
			var s2 = $("#roomStatus").select2();
			s.val("起居室").trigger("change");
			s2.val("0").trigger("change"); */
		});
		function initTypeSelectData() {
			var html = "";
			var arr = [ "起居室", "餐厅", "厨房", "储物间", "卫生间", "房间", "平台", "阳台" ];
			for (var i = 0; i < arr.length; i++) {
				html = "<option value=\"" + arr[i] + "\">" + arr[i]
					+ "</option>";
				$("#roomTypeId").append(html);
			}
		}
	
		function addTr(obj) {
			var html = "";
			html = "<tr class=\"wUse\"><td width=\"73\"><span>用途</span></td><td width=\"320\"><input type=\"type\"id=\"\"name=\"workUse\"value=\"\"/> "
				+ "<a href=\"javascript:void(0)\"onclick=\"delTr(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
			$(obj).parent().parent().parent().append(html);
		}
	
		function delTr(obj) {
			var id = $(obj).attr("data-id");
			$(obj).parent().parent().remove();
			layer.msg("点击保存后，将彻底删除该条数据！");
		}
	
		function resetIndoor() {
			$("#infoorManageAddForm").find(
				"input:not([id^=entityId_],[id=peopleCount])").val("");
		}
	
		//展示房间使用
		function showTableMsg(obj) {
			var val = $(obj).val();
			if (val == "1") {
				$("#infoorManageAddForm [name='roomUse']").show();
				$("#roomUseProperty").val("客厅").trigger("change");
			} else {
				$("#infoorManageAddForm [name='roomUse']").hide();
			}
		}
	
		//封装表单数据为json
		function initPark() {
			var mli = layer.load(2);
			var remark = $("#infoorManageAddForm [name='remark']").val();
			var exDataId = $("#exDataId").val();//序列化id
			var pendingId=$("#pendingId").val();//待审批表单id
			if (remark == "") {
				layer.msg("审批说明不能为空");
				$("#infoorManageAddForm [name='remark']").focus();
				layer.close(mli);
				return null;
			} else {
				return {
					exDataId:exDataId,
					pendingId:pendingId,
					spFlag:spFlag,
					remark:remark
				};
			}
		}
	
		//成功后调用方法
		function successPark(responseText) {
			layer.close(layer.index);
			if (responseText.success) {
				layer.alert("保存成功！", {
					offset : '20%',
					shade : [ 0.1, '#fff' ]
				}, function() {
					layer.close(layer.index);
					parent.location.reload();
				});
	
			} else {
				layer.alert('保存失败！');
			}
		}
	</script>
</body>

</html>
